<template>
  <div>
    <el-row style="margin-top: 10px">
      <el-col :span="4">
        <span style="line-height: 40px">当前教室：{{ currentClassroom }} </span>
      </el-col>
      <el-col :span="20" align="right">
        <el-form :inline="true" :model="conditions" class="demo-form-inline">
          <el-form-item label="教学楼：">
            <el-select v-model="conditions.building"
                       size="small"
                       placeholder="教学楼"
                       style="width: 120px"
                       @change="handleChangeBuilding">
              <el-option
                  v-for="item in classroomBuilding"
                  :key="item.id"
                  :label="item.classroomBuildingName"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="教室：">
            <el-select v-model="conditions.classroom" size="small" placeholder="教室" style="width: 80px">
              <el-option
                  v-for="item in classroom"
                  :key="item.id"
                  :label="item.classroomCode"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="handleClick">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row style="margin-top: 10px">
      <data-matrix
          :data="list"
          :row-field="'section'"
          :column-field="'week'"
          :rows="rows"
          :columns="columns">
        <template v-slot="{ cell : planning }">
          <div class="cell">
            <div class="class-name">{{ planning.className }}</div>
            <div class="teacher">{{ planning.teacher }}</div>
            <div class="summary">
              <el-popover
                  placement="top-start"
                  width="200"
                  trigger="hover">
                <div>
                  <p>课程名称：{{ planning.className }}</p>
                  <p>授课教师：{{ planning.teacher }}</p>
                  <p>授课对象：{{ planning.teacher }}</p>
                  <p>周模式：{{ planning.teacher }}</p>
                </div>
                <span slot="reference"><i class="el-icon-document"></i></span>
              </el-popover>
            </div>
          </div>
        </template>
      </data-matrix>
    </el-row>
  </div>
</template>

<script>
import DataMatrix from "../../components/DataMatrix";
import {getClassroomPlanningsByClassroomId} from "@/api/classroomPlanning";
import {listClassroomBuildings} from "@/api/classroomBuilding";
import {listClassrooms} from "@/api/classroom";

export default {
  name: "ClassroomPlanning",
  components: {DataMatrix},
  data() {
    return {
      conditions: {
        building: {},
        classroom: {}
      },
      classroomBuilding: [],
      classroom: [],
      currentClassroom: "",
      //
      list: [],
      columns: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      rows: ['第一节', '第二节', '第三节', '第四节', '第五节', '第六节']
    }

  },
  created: function () {
    this.fetchData()
  },
  methods: {
    // 刷新数据
    fetchData() {
      // 列出所有教学楼
      listClassroomBuildings(1,100).then((response) => {
        this.classroomBuilding = response.data.data.list
        console.log(this.classroomBuilding)
      })
    },

    // 教学楼选择框值变化时间触发方法
    handleChangeBuilding() {
      listClassrooms(1,100).then((response) => {
        this.classroom = response.data.data.list
      })
    },

    // 查询按钮点击事件触发方法
    handleClick() {


      // listClassroomPlannings(1, 10).then((response) => {
      //   this.list = response.data.data.list
      // })

      getClassroomPlanningsByClassroomId(this.conditions.classroom).then((response) => {
        this.list = response.data.data
        console.log(this.conditions.classroom)
        this.currentClassroom = this.conditions.building + '-' + this.conditions.classroom
      })
    }
  }
}
</script>

<style scoped>
.demo-form-inline .el-form-item {
  margin-bottom: 0;
}

.cell {
  position: relative;
  width: 100%;
  height: 100%;
}

.cell .class-name {
  padding-top: 20px;
  color: #409EFF;
}

.cell .teacher {
  margin: 10px 0;
  font-size: 12px;

}

.summary {
  position: absolute;
  top: 2px;
  right: 6px;
  font-size: 12px;
}
</style>